import React from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';

class MyEcharts extends React.Component {
  constructor() {
    super();
    this.state = {
      mydata: [],
    };
  }
  componentDidMount() {
    this.renderData(this.props);
  }
  static getDerivedStateFromProps(props, state) {
    if (document.getElementById('main') != null) {
      // 初始化
      let newdata = [];
      let myChart = echarts.init(document.getElementById(props.data.idName));
      let objdata = props.data.ydata.ydata1;
      let newobjec = {
        name: props.data.thetype[0],
        type: 'bar',
        data: objdata,
      };
      newdata.push(newobjec);
      myChart.setOption(
        {
          title: {
            text: `${props.data.years}`,
            x: 'center',
            y: 'bottom',
            textStyle: {
              color: 'black',
            },
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: props.data.thetype,
            textStyle: {
              color: 'black',
            },
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: {
                show: true,
                type: 'jpg',
              },
            },
          },
          xAxis: [
            {
              type: 'category',
              data: props.data.xdata,
              axisLine: {
                lineStyle: {
                  color: 'black',
                  width: '50px',
                },
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: 'black',
                },
              },
            },
          ],
          series: newdata,
        },
        true
      );
    }
    return state;
  }
  renderData = nextProps => {
    // 初始化
    let newdata = [];

    let myChart = echarts.init(document.getElementById(nextProps.data.idName));
    let objdata = nextProps.data.ydata.ydata1;
    let newobjec = {
      name: nextProps.data.thetype[0],
      type: 'bar',
      data: objdata,
    };
    newdata.push(newobjec);
    myChart.setOption(
      {
        title: {
          text: `${nextProps.data.years}`,
          x: 'center',
          y: 'bottom',
          textStyle: {
            color: 'black',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: nextProps.data.thetype,
          textStyle: {
            color: 'black',
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: {
              show: true,
              type: 'jpg',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            data: nextProps.data.xdata,
            axisLine: {
              lineStyle: {
                color: 'black',
                width: '50px',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: 'black',
              },
            },
          },
        ],
        series: newdata,
      },
      true
    );
  };
  render() {
    return <div id={this.props.data.idName} style={{ width: '40vw', height: 500 }}></div>;
  }
}

export default MyEcharts;
